<template>
	<view :style="skin" class="content" >

		<HeadBigTitle title="Change mobile phone number"></HeadBigTitle>

		<view class="layout">
			<u--form labelPosition="left" :model="userObjCode" :rules="rulesCode" ref="uFormCode">
				<u-form-item prop="phone">
					<u-input v-model="userObjCode.phone" placeholder="Please enter your phone number"  border="bottom" :clearable="true" inputAlign="right">
						<text class="iconfont icon-a-mingchenguser" slot="prefix"></text>
					</u-input>
				</u-form-item>

				<u-form-item prop="code">
					<!-- #ifndef APP-NVUE -->
					<u-input v-model="userObjCode.code" border="bottom" inputAlign="right" placeholder="Please enter the verification code">
						<text class="iconfont icon-a-mingchengkeyhole" slot="prefix"></text>
						<text slot="suffix" @click="handleSendCode" class="sendCode">
							<text v-if="!timerShow">Send code</text>
							<text v-else>{{oneMinutes}}S</text>
						</text>
					</u-input>
					<!-- #endif -->

					<!-- #ifdef APP-NVUE -->
					<u--input v-model="userObjCode.code" border="bottom" inputAlign="right" placeholder="Please enter the verification code">
						<text class="iconfont icon-a-mingchengkeyhole" slot="prefix"></text>
						<text slot="suffix" @click="handleSendCode" class="sendCode">
							<text v-if="!timerShow">Send verification code</text>
							<text v-else>{{oneMinutes}}S</text>
						</text>

					</u--input>
					<!-- #endif -->
				</u-form-item>

			</u--form>
			<u-button shape="circle" color="var(--subjectColor)" :disabled="disableCode" @click="binding">Bind
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import HeadBigTitle from '@/components/HeadBigTitle.vue'
	import {
		registerCode,
		registerChcCode
	} from '@/api/login.js'
	import { udPhone }from '@/api/user.js'
	export default {
		data() {
			return {
				timerShow: false,
				disableCode: true,
				isPass: true,
				firstBind: 0,
				oneMinutes: 60,
				bindType: 'phone',
				userObjCode: {
					phone: '',
					code: '',

				},

				rulesCode: {
					'phone': [{
						type: 'string',
						message: "Please enter the verification code",
						trigger: ['blur', 'change'],
						required: true,

					}, ],
					'code': {
						type: 'string',
						required: true,
						message: 'Send verification code',
						trigger: ['blur', 'change'],
					},

				},
			}
		},
		onLoad(options) {

		},
		onReady() {
			this.$refs.uFormCode.setRules(this.rulesCode);
		},
		watch: {
			userObjCode: {
				handler: function(newV, oldV) {
					this.$refs.uFormCode && this.$refs.uFormCode.validate().then(res => {
						this.disableCode = false
					}).catch(err => {
						this.disableCode = true
					})
				},
				deep: true
			},
		},
		methods: {
			sendCode() {
				registerCode({
					mobile: this.userObjCode.phone,

				}).then(res => {
					console.log(res);
					if (res.code == 0) {
						uni.showToast({
							title: res.data,
							duration: 4000,
							icon: 'none'
						})
					}
				})
			},
			handleSendCode() {
				if (this.timerShow) return false
				this.timerShow = true
				let that = this
				this.sendCode()
				this.timer = setInterval(() => {
					that.oneMinutes--
					if (that.oneMinutes <= 0) {
						that.oneMinutes = 60;
						that.timerShow = false;
						clearInterval(that.tiemr);
					}
				}, 1000)
			},
			changeInputType() {
				this.isPass = !this.isPass
				uni.showToast({
					title: this.isPass + '',
					icon: 'none'
				});
			},
			binding() {
				registerChcCode({
					mobile:this.userObjCode.phone,
					vercode:this.userObjCode.code
				}).then(res =>{
					console.log(res);
					if(res.code == 0){
						udPhone({
							phone:this.userObjCode.phone,
							code:this.userObjCode.code
						}).then(rrs => {
							console.log(rrs);
							if(rrs.code == 0){
								uni.showToast({
									title: 'success',
									icon: 'none'
								});
								uni.navigateBack()
							}else{
								uni.showToast({
									title: rrs.msg,
									icon: 'none'
								});
							}
						})
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			}
		},
		mounted() {

		},

		components: {
			HeadBigTitle
		},
		computed: {
			...mapState({
				skin: state => state.theme.skin
			})

		},

	}
</script>

<style scoped lang="scss">
	.content {

		.top {
			width: 100%;
			height: 80px;
			background-color: var(--moduleColor);
			padding-top: 16px;
			padding-left: 16px;

			p {
				color: var(--subjectTextColor);
				font-size: 28px;
				line-height: 42px;
				font-weight: 400;
			}
		}

		.layout {
			background-color: var(--moduleColor);
			margin-top: 8px;
			padding: 16px;

			text {
				color: var(--subjectColor);
				font-size: 18px;
			}

			.sendCode {

				width: 70px;
				text-align: center;

				text {
					font-size: 14px;

				}
			}

			.errInfo {
				font-size: $uni-fz-12;
				color: $uni-color-red;
				line-height: 1.5;
			}


			/deep/.u-form-item {
				height: 61px;
				margin-bottom: 8px;
			}

			/deep/.u-form-item__body__right__message {
				margin-left: 0 !important;

			}

			.passIcon {
				color: var(--subtopicTextColor) !important;
				font-size: 18px;
			}

			/deep/.u-input__content__clear {
				color: var(--subtopicTextColor) !important;
				font-size: 18px;
			}

			.passIcon {
				color: var(--subtopicTextColor) !important;
				font-size: 18px;
			}

			button {
				margin-top: 32px;
				margin-bottom: 16px;
			}
		}
	}
</style>